<template>
  <view class="container">
    <!-- 分类菜单 -->
    <scroll-view scroll-x class="category-scroll">
      <view class="category-list">
        <view 
          class="category-item" 
          v-for="(item, index) in categories" 
          :key="index"
          :class="{'active': currentCategory === item.id}"
          @tap="switchCategory(item.id)"
        >
          {{item.name}}
        </view>
      </view>
    </scroll-view>

    <!-- 订单列表 -->
    <view class="order-list">
      <view class="order-item" v-for="(item, index) in orderList" :key="index">
        <view class="order-header">
          <text class="order-no">订单号：{{item.orderNo}}</text>
          <text class="order-status" :class="item.status">{{item.statusText}}</text>
        </view>
        <view class="order-content" @tap="navigateToDetail(item)">
          <image class="avatar" :src="item.lawyer.avatar" mode="aspectFill"></image>
          <view class="info">
            <view class="name-row">
              <text class="name">{{item.lawyer.name}}</text>
              <text class="title">{{item.lawyer.title}}</text>
            </view>
            <view class="service">
              <text class="label">服务项目：</text>
              <text>{{item.serviceName}}</text>
            </view>
            <view class="time">
              <text class="label">咨询时间：</text>
              <text>{{item.consultTime}}</text>
            </view>
          </view>
        </view>
        <view class="order-footer">
          <view class="price">
            <text class="label">实付款：</text>
            <text class="amount">¥{{item.amount}}</text>
          </view>
          <view class="actions">
            <button 
              class="action-btn" 
              v-if="item.status === 'pending'"
              @tap="cancelOrder(item)"
            >取消订单</button>
            <button 
              class="action-btn primary" 
              v-if="item.status === 'pending'"
              @tap="payOrder(item)"
            >立即支付</button>
            <button 
              class="action-btn" 
              v-if="item.status === 'completed'"
              @tap="writeReview(item)"
            >评价</button>
            <button 
              class="action-btn" 
              v-if="item.status === 'completed'"
              @tap="contactLawyer(item)"
            >联系律师</button>
          </view>
        </view>
      </view>
    </view>

    <!-- 空状态 -->
    <view class="empty" v-if="orderList.length === 0">
      <image src="/static/images/empty.png" mode="aspectFit"></image>
      <text>暂无订单</text>
    </view>

    <!-- 加载更多 -->
    <uni-load-more :status="loadMoreStatus"></uni-load-more>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentCategory: 'all',
      categories: [
        { id: 'all', name: '全部' },
        { id: 'pending', name: '待支付' },
        { id: 'processing', name: '进行中' },
        { id: 'completed', name: '已完成' },
        { id: 'cancelled', name: '已取消' }
      ],
      orderList: [],
      page: 1,
      pageSize: 10,
      loadMoreStatus: 'more'
    }
  },
  onLoad() {
    this.loadData()
  },
  onReachBottom() {
    if (this.loadMoreStatus === 'more') {
      this.loadMore()
    }
  },
  methods: {
    loadData() {
      // TODO: 加载订单数据
      this.loadMoreStatus = 'loading'
      // 模拟数据
      setTimeout(() => {
        this.orderList = [
          {
            id: 1,
            orderNo: 'L202401200001',
            status: 'pending',
            statusText: '待支付',
            lawyer: {
              name: '张律师',
              avatar: '/static/images/avatar/lawyer1.jpg',
              title: '高级合伙人'
            },
            serviceName: '婚姻家事咨询',
            consultTime: '2024-01-20 14:30',
            amount: '200.00'
          },
          {
            id: 2,
            orderNo: 'L202401190001',
            status: 'completed',
            statusText: '已完成',
            lawyer: {
              name: '李律师',
              avatar: '/static/images/avatar/lawyer2.jpg',
              title: '资深律师'
            },
            serviceName: '交通事故咨询',
            consultTime: '2024-01-19 10:00',
            amount: '300.00'
          }
        ]
        this.loadMoreStatus = 'more'
      }, 1000)
    },
    loadMore() {
      this.page++
      // TODO: 加载更多数据
    },
    switchCategory(categoryId) {
      this.currentCategory = categoryId
      this.page = 1
      this.orderList = []
      this.loadData()
    },
    navigateToDetail(item) {
      uni.navigateTo({
        url: `/pages/order/detail?id=${item.id}`
      })
    },
    cancelOrder(item) {
      uni.showModal({
        title: '提示',
        content: '确定取消订单吗？',
        success: (res) => {
          if (res.confirm) {
            // TODO: 调用取消订单接口
            const index = this.orderList.findIndex(i => i.id === item.id)
            if (index > -1) {
              this.orderList[index].status = 'cancelled'
              this.orderList[index].statusText = '已取消'
            }
            uni.showToast({
              title: '订单已取消',
              icon: 'success'
            })
          }
        }
      })
    },
    payOrder(item) {
      // TODO: 调用支付接口
      uni.navigateTo({
        url: `/pages/payment/index?orderId=${item.id}`
      })
    },
    writeReview(item) {
      uni.navigateTo({
        url: `/pages/review/write?orderId=${item.id}`
      })
    },
    contactLawyer(item) {
      uni.navigateTo({
        url: `/pages/chat/index?lawyerId=${item.lawyer.id}`
      })
    }
  }
}
</script>

<style lang="scss">
.container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 30rpx;
}

.category-scroll {
  background-color: #fff;
  white-space: nowrap;
  
  .category-list {
    display: inline-flex;
    padding: 20rpx;
    
    .category-item {
      padding: 10rpx 30rpx;
      font-size: 28rpx;
      color: #666;
      background-color: #f5f5f5;
      border-radius: 30rpx;
      margin-right: 20rpx;
      
      &.active {
        color: #fff;
        background-color: #1890ff;
      }
    }
  }
}

.order-list {
  padding: 20rpx;
  
  .order-item {
    background-color: #fff;
    border-radius: 12rpx;
    margin-bottom: 20rpx;
    overflow: hidden;
    
    .order-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20rpx;
      border-bottom: 1rpx solid #f5f5f5;
      
      .order-no {
        font-size: 24rpx;
        color: #666;
      }
      
      .order-status {
        font-size: 24rpx;
        
        &.pending {
          color: #faad14;
        }
        
        &.processing {
          color: #1890ff;
        }
        
        &.completed {
          color: #52c41a;
        }
        
        &.cancelled {
          color: #999;
        }
      }
    }
    
    .order-content {
      display: flex;
      padding: 20rpx;
      border-bottom: 1rpx solid #f5f5f5;
      
      .avatar {
        width: 100rpx;
        height: 100rpx;
        border-radius: 50%;
        margin-right: 20rpx;
      }
      
      .info {
        flex: 1;
        
        .name-row {
          display: flex;
          align-items: center;
          
          .name {
            font-size: 28rpx;
            font-weight: bold;
          }
          
          .title {
            font-size: 24rpx;
            color: #666;
            margin-left: 20rpx;
          }
        }
        
        .service, .time {
          font-size: 24rpx;
          color: #666;
          margin-top: 10rpx;
          
          .label {
            color: #999;
          }
        }
      }
    }
    
    .order-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20rpx;
      
      .price {
        .label {
          font-size: 24rpx;
          color: #999;
        }
        
        .amount {
          font-size: 32rpx;
          color: #f5222d;
          font-weight: bold;
        }
      }
      
      .actions {
        display: flex;
        
        .action-btn {
          font-size: 24rpx;
          color: #666;
          background-color: #f5f5f5;
          padding: 10rpx 30rpx;
          border-radius: 30rpx;
          margin-left: 20rpx;
          
          &.primary {
            color: #fff;
            background-color: #1890ff;
          }
        }
      }
    }
  }
}

.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 100rpx 0;
  
  image {
    width: 200rpx;
    height: 200rpx;
    margin-bottom: 20rpx;
  }
  
  text {
    font-size: 28rpx;
    color: #999;
  }
}
</style> 